{% load static %}
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}学生管理平台{% endblock %}</title>
    <meta name="description" content="{% block description %}学生管理系统后台管理界面{% endblock %}">
    <meta name="keywords" content="{% block keywords %}学生管理, 后台系统, 管理员面板{% endblock %}">
    <link rel="canonical" href="{% block canonical %}{{ request.build_absolute_uri }}{% endblock %}">

    <!-- 字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{% static 'css/all.min.css' %}">

    <!-- LayUI样式 -->
    <link rel="stylesheet" href="{% static 'css/layui.css' %}">

    <!-- 自定义CSS（黑色主题优化） -->
    <style>
        /* 全局基础样式（黑色主题） */
        :root {
            --primary-color: #1a1a1a;    /* 主色：深黑 */
            --secondary-color: #ffffff;  /* 背景色：纯白 */
            --accent-color: #3498db;     /* 强调色：清新蓝 */
            --text-primary: #ffffff;     /* 主文本色：白（黑背景高对比） */
            --text-secondary: #cccccc;   /* 次要文本色：浅灰 */
            --menu-bg: #2d2d2d;          /* 菜单背景：深灰黑 */
            --hover-bg: #3a3a3a;         /* 悬停背景：中灰黑 */
            --active-bg: #454545;        /* 激活背景：浅灰黑 */
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);  /* 小阴影 */
            --shadow-md: 0 4px 16px rgba(0,0,0,0.3); /* 中阴影 */
            --radius-sm: 6px;            /* 小圆角 */
            --radius-md: 10px;           /* 中圆角 */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: var(--secondary-color);
            color: var(--text-primary);
            line-height: 1.6;
        }

        /* 头部区域（黑色主题） */
        .layui-header {
            background-color: var(--primary-color) !important;
            box-shadow: var(--shadow-sm);
            padding: 0 25px;
        }

        .layui-logo {
            line-height: 60px;
            margin-right: 35px;
        }

        .layui-logo .site-title {
            font-size: 22px;
            font-weight: 600;
            color: var(--secondary-color) !important;
            letter-spacing: 1px;
        }

        /* 水平导航栏（黑色主题） */
        .layui-nav {
            background-color: transparent;
            margin-top: 8px;
        }

        .layui-nav .layui-nav-item {
            margin: 0 12px;
            transition: all 0.3s ease;
        }

        .layui-nav .layui-nav-item a {
            color: var(--text-primary) !important;
            padding: 0 18px !important;
            font-size: 16px;
            border-radius: var(--radius-sm);
        }

        .layui-nav .layui-nav-item a:hover {
            color: var(--secondary-color) !important;
            background-color: var(--hover-bg) !important;
        }

        .layui-nav .layui-this > a {
            color: var(--secondary-color) !important;
            background-color: var(--accent-color) !important;
        }

        /* 左侧导航树（黑色主题） */
        .layui-side {
            background-color: var(--menu-bg) !important;
            box-shadow: var(--shadow-md);
            border-right: 1px solid #3a3a3a;
        }

        .layui-side-scroll {
            padding: 20px 0;
        }

        .layui-nav-tree {
            background-color: transparent;
        }

        .layui-nav-tree .layui-nav-item {
            margin: 6px 0;
        }

        .layui-nav-tree .layui-nav-item a {
            padding: 14px 25px;
            color: var(--text-primary) !important;
            border-radius: var(--radius-sm);
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .layui-nav-tree .layui-nav-item a:hover {
            color: var(--secondary-color) !important;
            background-color: var(--hover-bg) !important;
        }

        .layui-nav-tree .layui-this > a {
            color: var(--secondary-color) !important;
            background-color: var(--active-bg) !important;
            font-weight: 500;
        }

        .layui-nav-tree .layui-nav-child {
            padding-left: 30px;
            background-color: #262626;
            border-radius: var(--radius-sm);
            margin-top: 8px;
            margin-bottom: 8px;
        }

        /* 优化：图标样式统一用 CSS 类控制 */
        .nav-icon {
            color: var(--text-secondary);
            margin-right: 15px;
        }

        .nav-icon.active {
            color: var(--accent-color);
        }

        .nav-badge {
            background-color: var(--secondary-color);
        }

        /* 主体内容区域 */
        .layui-body {
            background-color: var(--secondary-color);
            padding: 30px;
        }

        .main-wrapper {
            max-width: 1600px;
            margin: 0 auto;
        }

        .content-card {
            background: var(--secondary-color);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            padding: 40px;
            min-height: calc(100vh - 160px);
            margin-bottom: 30px;
            border: 1px solid #eee;
        }

        .content-card h3 {
            color: var(--text-primary);
            font-size: 26px;
            margin-bottom: 35px;
            padding-bottom: 18px;
            border-bottom: 1px solid #eee;
        }

        /* 移动端优化 */
        .mobile-menu-btn {
            display: none;
            color: var(--text-primary);
            font-size: 26px;
            cursor: pointer;
            padding: 0 20px;
            line-height: 60px;
        }

        .layui-hide-lg {
            display: none !important;
        }

        /* 按钮优化 */
        .layui-btn {
            border-radius: var(--radius-sm);
            padding: 14px 32px;
            font-size: 17px;
            transition: all 0.3s ease;
            background-color: var(--primary-color);
            border: 1px solid #3a3a3a;
            color: var(--text-primary);
        }

        .layui-btn:hover {
            background-color: var(--hover-bg);
            border-color: #454545;
        }

        .layui-btn-primary {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
        }

        .layui-btn-primary:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }

        /* 加载动画优化 */
        .layui-layer-loading {
            border-radius: var(--radius-md);
            background-color: rgba(255,255,255,0.9);
            box-shadow: var(--shadow-md);
        }

        /* 优化：权限提示样式 */
        .permission-hidden {
            display: none !important;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域 -->
        <header class="layui-header layui-bg-black">
            <div class="layui-logo">
                <i class="layui-icon layui-icon-form nav-icon"></i>
                <span class="site-title">学生管理平台</span>
            </div>

            <!-- 移动端菜单按钮 -->
            <div class="mobile-menu-btn" id="mobile-menu-btn">
                <i class="layui-icon layui-icon-spread-left nav-icon"></i>
            </div>

            <!-- 顶部导航菜单 -->
            <ul class="layui-nav layui-layout-right">
                <!-- 用户菜单 -->
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-user nav-icon"></i> 管理员</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#"><i class="layui-icon layui-icon-user nav-icon"></i> 个人中心</a></dd>
                        <dd><a href="#"><i class="layui-icon layui-icon-logout nav-icon"></i> 退出登录</a></dd>
                    </dl>
                </li>
                <!-- 通知菜单 -->
                <li class="layui-nav-item">
                    <a href="#"><i class="layui-icon layui-icon-notice nav-icon"></i> 消息<span class="layui-badge-dot nav-badge"></span></a>
                </li>
            </ul>
        </header>

        <!-- 左侧导航菜单（黑色主题） -->
        <nav class="layui-side">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="nav" lay-shrink="all">
                    <!-- 班级信息（默认展开） -->
                    <li class="layui-nav-item layui-nav-itemed" data-permission="admin">
                        <a href="javascript:;"><i class="layui-icon layui-icon-form nav-icon"></i> 班级信息</a>
                        <dl class="layui-nav-child">
                            <dd data-permission="admin"><a href="javascript:;" data-url="/class/list/"><i class="layui-icon layui-icon-list nav-icon"></i> 班级列表</a></dd>
                            <dd data-permission="admin"><a href="javascript:;" data-url="/waiting/"><i class="layui-icon layui-icon-more nav-icon"></i> 待开发</a></dd>
                        </dl>
                    </li>

                    <!-- 学生信息（默认折叠） -->
                    <li class="layui-nav-item" data-permission="admin">
                        <a href="javascript:;"><i class="layui-icon layui-icon-form nav-icon"></i> 学生信息</a>
                        <dl class="layui-nav-child">
                            <dd data-permission="admin"><a href="javascript:;" data-url="/student/list/"><i class="layui-icon layui-icon-list nav-icon"></i> 学生列表</a></dd>
                            <dd data-permission="admin"><a href="javascript:;" data-url="/waiting/"><i class="layui-icon layui-icon-more nav-icon"></i> 待开发</a></dd>
                        </dl>
                    </li>

                    <!-- 资产信息（默认折叠） -->
                    <li class="layui-nav-item" data-permission="admin">
                        <a href="javascript:;"><i class="layui-icon layui-icon-form nav-icon"></i> 资产信息</a>
                        <dl class="layui-nav-child">
                            <dd data-permission="admin"><a href="javascript:;" data-url="/asset/list/"><i class="layui-icon layui-icon-list nav-icon"></i> 资产列表</a></dd>
                            <dd data-permission="admin"><a href="javascript:;" data-url="/waiting/"><i class="layui-icon layui-icon-more nav-icon"></i> 待开发</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 主体内容区域 -->
        <main class="layui-body">
            <div class="main-wrapper">
                <div class="content-card">
                    {% block content %}
                    <h3>欢迎使用学生管理平台</h3>
                    <p>这里是内容区域，您可以在此处添加具体功能模块。</p>
                    <div class="demo-section" style="margin-top: 25px;">
                        <h4>近期功能更新</h4>
                        <ul style="list-style: none; padding-left: 0;">
                            <li>✓ 班级信息管理优化</li>
                            <li>✓ 学生数据导出功能</li>
                            <li>✓ 资产统计报表新增</li>
                        </ul>
                    </div>
                    {% endblock %}
                </div>
            </div>
        </main>
    </div>

    <!-- 移动端遮罩层 -->
    <div class="layui-hide-lg" id="mobile-mask"></div>

    <!-- 引入LayUI JavaScript库 -->
    <script src="{% static 'js/layui.js' %}"></script>
    <script>
        layui.use(['element', 'jquery', 'layer'], function () {
            var element = layui.element;
            var $ = layui.jquery;
            var layer = layui.layer;
            var $body = $('body');
            var $sideNav = $('.layui-side');
            var $mobileMenuBtn = $('#mobile-menu-btn');
            var $mobileMask = $('#mobile-mask');
            var $layuiNavTree = $('.layui-nav-tree');

            // 缓存常用选择器（优化性能）
            const $navItems = $('.layui-nav-item');
            const $contentCard = $('.content-card');

            // 初始化element组件
            element.init();

            // 页面加载时设置默认展开状态
            $(document).ready(function() {
                $('.layui-nav-item[data-title="班级信息"]').addClass('layui-nav-itemed');
                $('.layui-nav-item[data-title="学生信息"], .layui-nav-item[data-title="资产信息"]').removeClass('layui-nav-itemed');
            });

            // 移动端菜单控制（优化点击反馈）
            $mobileMenuBtn.on('click', function () {
                $sideNav.toggleClass('layui-show');
                $mobileMask.toggleClass('layui-show');
                $(this).find('i').toggleClass('layui-icon-spread-left layui-icon-shrink-right');
            });

            // 遮罩层点击关闭菜单（优化动画）
            $mobileMask.on('click', function () {
                $sideNav.removeClass('layui-show');
                $mobileMask.removeClass('layui-show');
                $mobileMenuBtn.find('i').removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
            });

            // 窗口大小变化响应（优化防抖）
            var resizeTimer;
            $(window).on('resize', function () {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function() {
                    if ($(window).width() <= 768) {
                        $sideNav.removeClass('layui-show');
                        $mobileMask.removeClass('layui-show');
                        $mobileMenuBtn.show();
                    } else {
                        $sideNav.removeClass('layui-show');
                        $mobileMask.removeClass('layui-show');
                        $mobileMenuBtn.hide();
                    }
                }, 150);
            }).trigger('resize');

            // 优化：动态权限控制（假设用户权限存储在 currentUserPermissions 变量中）
            function checkPermission(requiredPermission) {
                // 示例：假设当前用户权限为 'admin'（实际应从后端获取）
                const currentUserPermissions = 'admin';
                return requiredPermission.split(',').includes(currentUserPermissions);
            }

            // 优化：处理菜单权限（移除硬编码，动态隐藏无权限菜单）
            $navItems.each(function () {
                const $item = $(this);
                const requiredPermission = $item.data('permission');

                // 若权限不匹配且非默认展开项，则隐藏
                if (requiredPermission && !checkPermission(requiredPermission)) {
                    $item.addClass('permission-hidden');
                }
            });

            // 统一处理菜单点击（优化交互反馈）
            $layuiNavTree.on('click', 'a[data-url]', function (e) {
                e.preventDefault();
                const $this = $(this);
                const url = $this.data('url');
                const parentMenu = $this.closest('.layui-nav-item');

                // 展开父级菜单（带动画）
                if (!parentMenu.hasClass('layui-nav-itemed')) {
                    parentMenu.addClass('layui-nav-itemed');
                }

                // 显示加载动画
                const loading = layer.load(2, {
                    shade: [0.5, '#f5f7fa']
                });

                // 更新菜单选中状态
                $layuiNavTree.find('a[data-url]').removeClass('layui-this');
                $this.addClass('layui-this');

                // 异步加载内容（优化超时和重试）
                $.ajax({
                    url: url,
                    type: 'GET',
                    dataType: 'html',
                    cache: false,
                    timeout: 10000, // 10秒超时
                    success: function (res) {
                        layer.close(loading);
                        $contentCard.html(res).hide().fadeIn(300); // 淡入动画
                        element.render();
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        let errorMsg = '加载失败：网络错误';

                        // 处理超时
                        if (xhr.status === 0) {
                            errorMsg = '加载超时（10秒未响应），请检查网络连接';
                        }

                        // 显示错误提示并添加重试按钮
                        layer.msg(errorMsg, {
                            icon: 2,
                            time: 0, // 不自动关闭
                            btn: ['重试', '关闭'],
                            yes: function (index) {
                                layer.close(index);
                                $this.trigger('click'); // 重新触发点击事件
                            }
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>